<template>
	<view class="body-view">

		<videoplay @share="share"></videoplay>
	</view>
</template>

<script>
  import saystory from "../../pages/story/index.vue"
  import videoplay from "../find/index.vue"
  import my from "../../pages/my/index.vue"
  export default {
    name: "index",
    components:{
      my,videoplay,saystory
    },
    data() {
      return {
        shareContent:{},
        scrollLeft: 0,
        isClickChange: false,
        currentTab: 0,
        swiperDateList: [[],[],[],[],[],[]]
      }
    },
    onLoad: function() {
      //初始化数据
      for (var i = 0; i < this.swiperDateList.length; i++) {
        this.getDateList(i);
      }
    },

    onHide(){
      console.log('页面隐藏');
    },
    onUnload(){
      console.log('页面卸载');
    },
    onShow(){
      console.log('页面显示');
    },
    onShareAppMessage(res) {

      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: this.shareContent.title,
        path: this.shareContent.path,
        imageUrl:this.shareContent.thumb,
        desc:this.content,
      }
    },
    methods: {
      share(param){
        console.log(param);
        this.shareContent = param;
      },

      swichMenu: async function (current) { //点击其中一个 menu
        if (this.currentTab == current) {
          return false;
        } else {
          this.currentTab = current;
          this.setScrollLeft(current);
        }
      },
      swiperChange: async function (e) {
        let index = e.target.current;
        this.setScrollLeft(index);
        this.currentTab = index;
      },
      setScrollLeft: async function (tabIndex) {
        let leftWidthSum = 0;
        for (var i = 0; i <= tabIndex; i++) {
          let nowElement = await this.getWidth('tabNum' + i);
          leftWidthSum = leftWidthSum + nowElement.width;
        }
        let winWidth = uni.getSystemInfoSync().windowWidth;
        this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
      },
      getWidth: function (id) { //得到元素的宽高
        return new Promise((res, rej) => {
          uni.createSelectorQuery().select("#" + id).fields({
            size: true,
            scrollOffset: true
          }, (data) => {
            res(data);
          }).exec();
        })
      },
      loadMore: function (tabIndex) {
        console.log('正在加载更多数据。。。')
        this.getDateList(tabIndex);
      },
      getDateList: function (tabIndex) {
        for (var i = 0; i < 20; i++) {
          if (!this.menuTabs[tabIndex])
            break;
          var entity = this.menuTabs[tabIndex].name + (this.swiperDateList[tabIndex].length);
          this.swiperDateList[tabIndex].push(entity);
        }
      }
    }
  }
</script>

<style lang='scss'>
	/*page {*/
	/*    width: 100%;*/
	/*    height: 100%;*/
	/*    display: flex;*/
	/*    flex-wrap: wrap;*/
	/*    align-items: flex-start;*/
	/*    justify-content: center;*/
	/*    background: rgba(255, 255, 255, 0);*/
	/*}*/

	.body-view {
		height: 100%;
		width: 100%;
	}
	.scroll_view{
		width: 100%;
		position: fixed;
		top: 0upx;
		left: 0upx;
		z-index: 100;
		height: 90upx;
		display: flex;
		align-items: center;
	}
	.top-menu-view {
		display: flex;
		white-space: nowrap;
		width: 100%;
		background-color: rgba(255,255,255,0);
		height: 100%;
		/* 在这里设置导航条高度 */
	}.top-menu-view2 {
		 background-color: rgba(255,255,255,1);
		 /* 在这里设置导航条高度 */
	 }

	.top-menu-view .menu-one-view {
		display: inline-block;
		white-space: nowrap;
		width: 33.3%;
		height: 75upx;
	}

	.top-menu-view .menu-one-view .menu-one {
		/* 在这里写 单个按钮样式 */
		/*margin-left: 60upx;*/
		/*margin-right: 25upx;*/
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-txt {
		height: 61upx;
		font-size:$uni-font-size-base;
		font-weight: 800;
		color: $uni-color-664e37;
		line-height: 61upx;
	}.top-menu-view .menu-one-view .menu-one .menu-one-txt2 {
		 height: 61upx;
		 font-size:$uni-font-size-base;
		 font-weight: 400;
		 color: #ffffff;
		 opacity: 0.7;
		 line-height: 61upx;
	 }

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
		width: 60%;
		height: 4upx;
	}

	.top-menu-view .menu-one-view .menu-one-act {
		/* 在这里写 单个按钮样式 */
		/*margin-left: 60upx;*/
		/*margin-right: 25upx;*/
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
		height: 61upx;
		font-size:$uni-font-size-base;
		font-weight: 400;
		color: $uni-color-fcb300;
		line-height: 61upx;
	}
	.top-menu-view .menu-one-view .menu-one-act .menu-one-txt2 {
		height: 61upx;
		font-size:$uni-font-size-base;
		font-weight: 400;
		color: $uni-color-fcb300;
		/*opacity: 0.7;*/
		line-height: 61upx;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
		width: 32upx;
		height: 6upx;
		border-radius:4upx ;
		background: $uni-color-fcb300;
	}

	.swiper-box-list {
		flex: 1;
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
	}

	.swiper-one-list {
		height: 100%;
		width: 100%;
	}

	.swiper-one-list .swiper-list-entity {
		width: 100%;
		height: 75upx;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

</style>
